<template>
  <div class="wrapper">
    <h1>这是登录页</h1>
    用户名: <el-input v-model="username" placeholder="请输入用户名" style="width: 200px;"></el-input>
    <span v-show="isShowUsernameTag" style="color: red;">用户名不符合规范 请输入6-20位字母、数字、下划线</span>
    <br></br>
    密码: <el-input v-model="password" placeholder="请输入密码" type="password" style="width: 200px;"></el-input>
    <span v-show="isShowPasswordTag" style="color: red;">密码不符合规范 请输入8-20位字符 且不能包含空格</span>
    <br></br>
    <el-button type="primary" @click="handleClick">登录</el-button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { userInfoStore } from '@/pinia/userInfo'

// 信息
const username = ref('')
const password = ref(null)
const isShowUsernameTag = ref(false)
const isShowPasswordTag = ref(false)

// 检验
const usernameReg = /^[a-zA-Z0-9_]{3,20}$/
const passwordReg = /^[^ ]{3,20}$/

// 路由
const router = useRouter()

// 获取tokens
const userInfo = userInfoStore()


// 函数
const handleClick = async ()=>{
  if(usernameReg.test(username.value) && passwordReg.test(password.value)){
    try {
      await userInfo.getTokens()
      router.push('/layout')
    } catch (error) {
      console.log(error);
    }
  }
  if(!usernameReg.test(username.value)){
    isShowUsernameTag.value = true
  }
  if(!passwordReg.test(password.value)){
    isShowPasswordTag.value = true
  }
}

</script>


